<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
		// 定义一个3 * 3的数组
		let arr = new Array();
		// 区分玩家与电脑
		let isPlayer = true;
		let isFinish = false;
		// 绘制棋盘
		let container = document.createElement('div');
		container.style.width = '600px';
		container.style.height = '600px';
		container.style.backgroundColor = '#fff';
		container.style.border = '5px solid black';
		container.style.margin = '0 auto';
		container.style.display = 'flex';
		for (let i = 0; i < 3; i++) {
			// 创建每一行，并设置二唯数组
			arr[i] = new Array();
			let row = document.createElement('div');
			for (let j = 0; j < 3; j++) {
				// 初始化棋盘格子
				let cell = document.createElement('div');
				cell.style.width = '200px';
				cell.style.height = '200px';
				cell.style.backgroundColor = '#fff';
				cell.style.border = 'none';
				cell.style.outline = '2px solid black';
				row.appendChild(cell);
				// 绑定事件
				cell.onclick = function() {
					game(cell, i, j);
				}
	
			}
			// 绘制棋盘新的一行
			container.appendChild(row);
		}
		
		// 把棋盘加入到页面
		let body = document.querySelector('body');
		body.appendChild(container);
	
		// 游戏规则
		function game(cell, i, j) {
			// 是否结束
			if (isFinish) {
				if(confirm('这一局已经结束，刷新页面重开一局！')) {
					location.reload();
				}
				return;
			}
			
			// 是否已经有棋子
			let item = arr[i][j];
			if (item != undefined) {
				alert('这个位置已经有棋子了, 请在其他位置下棋!');
				return;
			}
			// 构建一下span标签放在被点击的cell中
			let spanEl = document.createElement('span');
			spanEl.style.width = '100%';
			spanEl.style.height = '100%';
			spanEl.style.lineHeight = '100%';
			spanEl.style.display = 'flex';
			spanEl.style.justifyContent = 'center';
			spanEl.style.alignItems = 'center';
			spanEl.style.textAlign = 'center';
			spanEl.style.fontSize = '96px';
			spanEl.style.fontWeight = 'bold';
	
			// 双方出棋
			if (isPlayer) {
				spanEl.innerHTML = 'o';
				spanEl.style.color = 'red';
				arr[i][j] = 'o';
			} else {
				spanEl.innerHTML = 'x';
				spanEl.style.color = 'blue';
				isPlayer = 0;
				arr[i][j] = 'x';
			}
			// 交换下棋者
			isPlayer = !isPlayer;
			// 在棋盘中绘制棋子
			cell.appendChild(spanEl);
			console.log(arr);
			// 校验结果
			let isWin = checkWin();
			if (isWin == 'n') {
				return;
			}
			
			// 处理结果显示
			let resultEl = document.createElement('p');
			resultEl.style.width = '100%';
			resultEl.style.fontSize = '36px';
			resultEl.style.fontWeight = 'blod';
			resultEl.style.textAlign = 'center';
			
			if (isWin == 'x') {
				resultEl.style.color = 'blue';
				resultEl.innerHTML = '蓝 方胜';
			} else if (isWin == 'o'){
				resultEl.style.color = 'red';
				resultEl.innerHTML = '红 方胜';
			} else if (isWin == 'f') {
				resultEl.innerHTML = '双方平局';
			}
			// 结束
			isFinish = true;
			// 显示结果
			document.querySelector('body').appendChild(resultEl);
			
		}
	
		// 检查当前棋局的胜负
		function checkWin() {
			// 水平
			for (let i = 0; i < 3; i++) {
				if (arr[i][0] != undefined && arr[i][0] == arr[i][1] && arr[i][1] == arr[i][2]) {
					return arr[i][0];
				}
			}
			// 垂直
			for (let i = 0; i < 3; i++) {
				if (arr[0][i] != undefined && arr[0][i] == arr[1][i] && arr[1][i] == arr[2][i]) {
					return arr[0][i];
				}
			}
			// 对角线
			if (arr[1][1] != undefined) {
				if (arr[0][0] == arr[1][1] && arr[1][1] == arr[2][2]) {
					return arr[1][1];
				}
				if (arr[0][2] == arr[1][1] && arr[1][1] == arr[2][0]) {
					return arr[1][1];
				}
			}
			
			// 棋子是否已经满盘
			let isFull = 'f';
			for (let i = 0; i < 3; i++) {
				for (let j = 0; j < 3; j++) {
					if (arr[i][j] == undefined) {
						isFull = 'n';
					}
				}
			}
			return isFull;
		}
	</script>
</body>
</html>